﻿@{
    ViewData["Title"] = "ArriveDetails";
    Layout = null;
}

<link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />

<div class="layui-form" style="max-width: 900px; margin: 0 auto;">
    <!-- 行1：通知单编号与采购订单编号 -->
    <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
        <div style="flex: 1; margin-right: 15px;">
            <label class="layui-form-label" style="width: 120px;">* 通知单编号</label>
            <input type="text" name="notificationCode" required lay-verify="required" class="layui-input" placeholder="请输入通知单编号" style="width: calc(100% - 130px);" readonly>
        </div>
        <div style="flex: 1;">
            <label class="layui-form-label" style="width: 120px;">采购订单编号</label>
            <input type="text" name="purchaseOrderCode" class="layui-input" placeholder="请输入采购订单编号" style="width: calc(100% - 130px);" readonly>
        </div>
    </div>

    <!-- 行2：通知单名称与供应商 -->
    <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
        <div style="flex: 1; margin-right: 15px;">
            <label class="layui-form-label" style="width: 120px;">* 通知单名称</label>
            <input type="text" name="notificationName" required lay-verify="required" class="layui-input" placeholder="请输入通知单名称" style="width: calc(100% - 130px);" readonly>
        </div>
        <div style="flex: 1;">
            <label class="layui-form-label" style="width: 120px;">* 供应商</label>
            <input type="text" name="arrivalDates" class="layui-input" placeholder="请输入联系人" style="width: calc(100% - 130px);" readonly>
            @* <select name="supplier" lay-filter="supplier" class="layui-input" style="width: calc(100% - 130px);"> *@
            @*     <option value="">请选择供应商</option> *@
            @*     <!-- 可继续添加其他供应商 --> *@
            @* </select> *@
        </div>
    </div>

    <!-- 行3：到货日期与联系人 -->
    <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
        <div style="flex: 1; margin-right: 15px;">
            <label class="layui-form-label" style="width: 120px;">* 到货日期</label>
            <input type="date" name="arrivalDate" required lay-verify="required" class="layui-input" style="width: calc(100% - 130px);" readonly>
        </div>
        <div style="flex: 1;">
            <label class="layui-form-label" style="width: 120px;">联系人</label>
            <input type="text" name="contactPerson" class="layui-input" placeholder="请输入联系人" style="width: calc(100% - 130px);" readonly>
        </div>
    </div>

    <br />

    <!-- 行4：联络方式与备注 -->
    <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
        <div style="flex: 1; margin-right: 15px;">
            <label class="layui-form-label" style="width: 120px;">联络方式</label>
            <input type="text" name="contactMethod" class="layui-input" placeholder="请输入联络方式" style="width: calc(100% - 130px);" readonly>
        </div>
        <div style="flex: 1.5;">
            <label class="layui-form-label" style="width: 120px;">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" rows="4" placeholder="请输入内容" class="layui-textarea" readonly></textarea>
            </div>
        </div>
    </div>
</div>



<br />
<h3 style="margin-top: 30px;">物料信息</h3>

@* 显示数据表格 *@
<table class="layui-hide" id="mainData" lay-filter="mainData" style="margin-top: 10px;margin-left: 20px">
</table>


<table class="layui-table">
    <thead>
        <tr>
            <th><input type="checkbox"></th>
            <th>物料编码</th>
            <th>物料名称</th>
            <th>规格型号</th>
            <th>单位</th>
            <th>到货数量</th>
            <th>是否检验</th>
            <th>合格数量</th>
            <th>检验单号</th>
            <th>备注</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td>IF20241221014</td>
            <td>啤酒花</td>
            <td>10CM</td>
            <td>kg</td>
            <td>20</td>
            <td>是</td>
            <td>20</td>
            <td>检验单号</td>
            <td>备注内容</td>
        </tr>
        <!-- 可添加更多物料信息 -->
    </tbody>
</table>




<!-- 确保 jQuery 在 Layui 之前加载 -->
<script src="~/libs/jquery/jquery.js"></script>
<script src="~/libs/layui-v2.5.6/layui/layui.js"></script>

<script>

     // 页面加载完成后执行的函数
    $(function () {
        ArriveDetail();
    });

    // 根据编码获取详情
    function ArriveDetail() {
        var notificationCode = "@ViewBag.notificationCode"; // 将其包裹在引号内
        $.ajax({
            url: '/NoticeOfArrival/ArriveDetail?notificationCode=' + encodeURIComponent(notificationCode), // 编码URL参数
            type: 'get',
            success: function (res) {
                console.log(res);
                            // 反填数据arrivalDates
            $('input[name="notificationCode"]').val(res.data.notificationCode);
             $('input[name="arrivalDates"]').val(res.data.arrivalDates);
            $('input[name="purchaseOrderCode"]').val(res.data.purchaseOrderCode);
            $('input[name="notificationName"]').val(res.data.notificationName);
            $('input[name="arrivalDate"]').val(res.data.arrivalDate);
            $('input[name="contactPerson"]').val(res.data.contactPerson);
            $('input[name="contactMethod"]').val(res.data.contactInformation);
            $('textarea[name="remark"]').val(res.data.remark);
            },
            error: function (xhr, status, error) {
                console.error("AJAX Error: ", error);
            }
        });
    }


      layui.use(['table', 'form'], function () {
        var table = layui.table;
        var form = layui.form;

        // 渲染数据表格
        function showData(){
            console.log("渲染数据表格");
              table.render({
                  elem: '#mainData',
                  url: '/NoticeOfArrival/Display', // 实际接口地址
                  page: true, // 开启分页
                  limit: 10, // 每页默认显示的条数
                  limits: [10, 20, 30], // 每页条数的选择项
                  cols: [
                       [
                              { field: 'notificationName', title: '物料编码', width: 150, align: 'center' },
                              { field: 'notificationName', title: '物料名称', width: 150, align: 'center' },
                              { field: 'purchaseOrderCode', title: '规格型号', width: 150, align: 'center' },
                              { field: 'arrivalDates', title: '单位', width: 150, align: 'center' },
                              { field: 'arrivalDate', title: '到货数量', width: 150, align: 'center' },
                              { field: 'contactPerson', title: '是否检验', width: 150, align: 'center' },
                              { field: 'contactInformation', title: '合格数量', width: 150, align: 'center' },
                              { field: 'remark', title: '检验单号', width: 150, align: 'center' },
                              { fixed: 'right', title: '备注', toolbar: '#barDemo', width: 150, align: 'center' }
                       ]
                   ],
                  where: {
                      notificationName: $("#notificationName").val(), //获取输入框的单位代码
                      page:1,
                      limit:10
                  },
                  parseData: function (res) {
                      console.log(res);
                      return {
                          code: res.code,
                          count: res.count,
                          data: res.data
                      };
                  },
              })
        }


        showData()


        //查询
        $("#searchButton").on("click", function() {
            console.log("查询");
            showData();
        });


        //删除
        table.on('tool(mainData)', function (obj) {
            var data = obj.data;
            if (obj.event === 'delete') {
                layer.confirm('确定删除吗？', function (index) {
                    $.ajax({
                        url: '/WorkStation/DeleteWorkStation',
                        type: 'post',
                        data: { id: data.id },
                        success: function (res) {
                            if (res === 1) {
                                layer.msg(res.msg, { icon: 1, time: 1000 }, function () {
                                    showData();
                                });
                            } else {
                                layer.msg(res.msg, { icon: 2, time: 1000 });
                            }
                        }
                    });
                });
            }
            if (obj.event === 'upd') {
                layer.open({
                    type: 2, // page 层类型
                    area: ['800px', '60%'],
                    title: '修改工作站',
                    shade: 0.6, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    maxmin: true, // 允许全屏最小化
                    anim: 0, // 0-6 的动画形式，-1 不开启
                    content: '/WorkStation/UpdateView?id=' + data.id,
                    end: function () {
                        // iframe层关闭后刷新页面
                        location.reload(); // 刷新页面
                    }
                });
            }
        });


        // 添加
        $("#addButton").on("click", function() {
              layer.open({
              type: 2, // page 层类型
              area: ['1000px', '80%'],
              title: '添加工作站',
              shade: 0.6, // 遮罩透明度
              shadeClose: true, // 点击遮罩区域，关闭弹层
              maxmin: true, // 允许全屏最小化
              anim: 0, // 0-6 的动画形式，-1 不开启
              content: '/NoticeOfArrival/AddView',
               end: function () {
                       // iframe层关闭后刷新页面
                       location.reload(); // 刷新页面
               }
            });
        });

    });





</script>
